<template>
	<view>
		<view class="top">
			<view class="top1">
				<view class="top_left">
					订单编号：{{detail.order_no}}
				</view>
				<view class="top_right">
					{{detail.state_text}}
				</view>
			</view>
			<view class="top2">
				<view class="top2_text">
					当前状态：已为您预约快递，请保持电话畅通。
				</view>
				<view class="top2_bottom">
					<view class="t-top">
						<image class="t-img" :src="detail.product[0].image.file_path" mode=""></image>
					</view>
					<view class="t-middle">
						<view class="">
							<view class="t-text">
								{{detail.product[0].product_name}}
							</view>
							<view class="t-text2">
								{{detail.product[0].product_attr}}
							</view>
						</view>
					</view>
					<view class="t-bottom">
						合计费用：￥{{detail.total_price}}
					</view>
				</view>
			</view>
		</view>
		<view class="top">
			<!-- <image src=""></image> -->
			<view class="jd_no" style="">
				<view class="t-text-jd">
					京东物流
				</view>
				<view class="t-text2">
					运单号：{{detail.jd_waybillCode}}
				</view>
			</view>
			<!-- <cc-defineStep :colors="colors" :stepData="stepData"></cc-defineStep> -->
			<!-- <jdwuliu  :colors="colors" :stepData="stepData"></jdwuliu> -->
			<view class="step">
				<view class="step_box">
					<!-- 左侧进度线 -->
					<view class="step_left">
					</view>
					
					<view class="step_right">
						<view class="right_content" v-for="(item,index) in stepData" :key="index">
							<!-- {{item}} -->
							<!-- 进度名称 -->
							<block v-if="nowTime > item.operationTime">
								<p class="result" :style="{color:colors}">{{item.categoryName}}</p>
								<!-- <p class="result" :style="{color:colors}">{{item.operatorName}}</p> -->
								<p class="result" :style="{color:colors}">{{item.operationRemark}}</p>
							</block>
							<!-- <block v-else>
								<p class="result" >{{item.categoryName}}</p>
							</block> -->
			
							<!-- 进度时间 -->
							<p class="times" >{{item.operationTime}}</p>
							<!-- 右侧的进度点 -->
							<p class="status" v-if="nowTime > item.operationTime"
								:style="{background: colors,borderColor: colors}">{{"✓"}}
							</p>
							<p class="status" v-else>{{"✓"}}
							</p>
							<!-- <p class="status">{{"✓"}}
							</p> -->
						</view>
					</view>
				</view>
			
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: '',
				datile: {
					bianhao: '1153699624969761536',
					money: '69.00'
				},
				detail: '',
				colors: "#2568BC",
				//模拟后台返回的数据
				stepData: [
				],
				nowTime:''
			};
		},
		methods: {
			getNowTime() {
				let date = new Date();
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				this.nowTime = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			},
			callTest() {
				let self = this
				self._post('order.order/jd_order_line', {
						order_id: self.order_id,
					},
					function(res) {
						self.stepData = res.data.jd.data.traceDetails
						console.log('res',res.data.jd.data.traceDetails);
					}
				);
			},
			getData() {
				let self = this;
				let order_id = self.order_id;
				let url = 'user.order/detail';
				if (this.source == 'supplier') {
					url = 'supplier.order/detail';
				}
				self.loadding = true;
				self._get(url, {
						order_id: order_id,
						pay_source: self.getPlatform()
					},
					function(res) {
						self.expressList = res.data.expressList;
						self.detail = res.data.order;
						self.extractStore = res.data.order.extractStore;
						self.service_open = res.data.setting.service_open;
						if (res.data.setting.mp_service == null) {
							self.service_type = 10;
						} else {
							self.service_type = res.data.setting.mp_service.service_type;
						}
						if (res.data.show_alipay) {
							self.showAlipay = true;
						}
						self.loadding = false;
						uni.hideLoading();
					}
				);
			},

		},
		onLoad(options) {
			this.order_id = options.order_id
			this.callTest()
			this.getData()
			this.stepData.reverse(),
			this.getNowTime()
		}
	}
</script>

<style lang="scss" scoped>
	.step {
		margin: 21rpx 0rpx;
		background-color: #fff;
		padding: 35rpx 0rpx;
	}
	
	.step_box {
		margin: 0 20rpx;
		margin-left: 20rpx;
		display: flex;
	
		.step_left {
			width: 2rpx;
			display: block;
			background-color: #DDDDDD;
			overflow: hidden;
		}
	
		.step_right {
			margin-left: 20rpx;
			margin-top: -10rpx;
	
			.right_content {
				position: relative;
				margin-bottom: 30rpx;
	
				.title {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}
	
				.times {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 36rpx;
					padding: 10rpx 15rpx;
				}
	
				.status {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					border: 2rpx solid #ccc;
					position: absolute;
					top: 10rpx;
					background-color: #ccc;
					left: -32rpx;
					color: white;
					line-height: 12px;
					font-size: 10px;
					text-align: center;
				}
	
				.result {
					padding: 10rpx 15rpx;
					font-size: 22rpx;
					margin-top: 10rpx;
					color: #999999;
				}
	
				&:last-of-type {
					margin-bottom: 0;
	
					.status {
						top: 14rpx;
					}
	
					&::before {
						content: '';
						width: 6rpx;
						height: 100%;
						background-color: #FFFFFF;
						position: absolute;
						top: 22rpx;
						left: -24rpx;
					}
				}
			}
		}
	}
	
	
	
	
	.jd_no{
		padding: 0 20rpx;
	}
	.top {
		margin: 21rpx 30rpx;
		background-color: #fff;
		padding: 35rpx 30rpx;
	}

	.top1 {
		display: flex;
		justify-content: space-between;
		padding-bottom: 35rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.top_left {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.top_right {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #E96725;
	}

	.top2_text {
		margin-top: 40rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #323232;
		margin-bottom: 40rpx;
	}

	.top2_bottom {
		display: flex;
		// justify-content: space-between;
	}

	.t-img {
		width: 148rpx;
		height: 109rpx;
		// width: 100%;
		// height: 109rpx;
	}

	.t-text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #323232;
		margin-bottom: 27rpx;
	}
	.t-text-jd {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #323232;
		margin-bottom: 10rpx;
	}

	.t-text2 {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.t-middle {
		display: flex;
		align-items: center;
	}

	.t-bottom {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #323232;
		padding-top: 70rpx;
		margin-left: auto;
	}

	.t-top {
		width: 26%;
	}
</style>